<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";

interface columnsType {
  values: Array<string>;
  defaultIndex: number;
}

interface tableListType {
  id: number;
  typeTime: string[];
  list: any;
}
let columns = ref<columnsType[]>([
  // 第一列
  {
    values: ["2022", "2021", "2020", "2019", "2018", "2017", "2016", "2015"],
    defaultIndex: 0,
  },
  // 第二列
  {
    values: ["03", "02", "01"],
    defaultIndex: 0,
  },
]);
let date = new Date();
onBeforeMount(() => {
  console.log();
  const defaultValues = [];
  for (let i = 1; i <= date.getMonth() + 1; i++) {
    if (i < 10) {
      defaultValues.unshift("0" + i);
    } else {
      defaultValues.unshift(i + "");
    }
  }
  columns.value[1].values = defaultValues;
});
let show = ref<boolean>(false);
let confirmSelect = (e: any) => {
  show.value = false;
  console.log(e);
};
let tableList = ref<Array<tableListType>>([
  {
    id: 1,
    typeTime: ["2022", "03"],
    list: [
      {
        id: "1001",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
      {
        id: "1002",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
      {
        id: "1003",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
    ],
  },
  {
    id: 2,
    typeTime: ["2022", "02"],
    list: [
      {
        id: "1004",
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc0%2F8e%2F28%2Fc08e28eb52da5a2b5b451ad6272a8197.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648823146&t=e5c261449fc06d5f321e0ab432fb7940",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-02",
      },
      {
        id: "1005",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
      {
        id: "1006",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
      {
        id: "1007",
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc0%2F8e%2F28%2Fc08e28eb52da5a2b5b451ad6272a8197.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648823146&t=e5c261449fc06d5f321e0ab432fb7940",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-02",
      },
    ],
  },
  {
    id: 3,
    typeTime: ["2022", "01"],
    list: [
      {
        id: "1004",
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc0%2F8e%2F28%2Fc08e28eb52da5a2b5b451ad6272a8197.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648823146&t=e5c261449fc06d5f321e0ab432fb7940",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-02",
      },
      {
        id: "1005",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
      {
        id: "1006",
        imgUrl:
          "https://img2.baidu.com/it/u=710564821,138499167&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-01",
      },
      {
        id: "1007",
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc0%2F8e%2F28%2Fc08e28eb52da5a2b5b451ad6272a8197.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648823146&t=e5c261449fc06d5f321e0ab432fb7940",
        title: "自己的玫瑰",
        userName: "康",
        updateTime: "2022-03-02",
      },
    ],
  },
]);
let changeSelect = (e: any) => {
  if (parseInt(e[0]) < date.getFullYear()) {
    const arr = [];
    for (let i = 1; i <= 12; i++) {
      if (i < 10) {
        arr.unshift("0" + i);
      } else {
        arr.unshift(i + "");
      }
    }
    columns.value[1].values = arr;
  }
  console.log(e);
};
</script>

<template>
  <div class="findReadContainer">
    <div class="card-list">
      <div class="card-item" v-for="(list, index1) in tableList" :key="list.id">
        <van-divider>{{ list.typeTime[1] }} 月</van-divider>
        <div class="card-li" v-for="(item, index2) in list.list" :key="item.id">
          <div class="left">
            <img class="avautar" :src="item.imgUrl" :alt="item.title + 'jpg'" />
          </div>
          <div class="right">
            <div class="title one-overflow">{{ item.title }}</div>
            <span class="userName">文/ {{ item.userName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-popup
    v-model:show="show"
    position="top"
    teleport="#app"
    :style="{ height: '35%' }"
  >
    <van-divider>选择日期</van-divider>
    <van-picker
      :columns="columns"
      @confirm="confirmSelect"
      @change="changeSelect"
      toolbar-position="bottom"
      :visible-item-count="3"
    />
  </van-popup>
</template>

<style lang="less">
.findReadContainer {
  position: relative;
  .card-list {
    margin-top: 70px;
    .card-li {
      margin-top: 10px;
      margin-left: 20px;
      display: flex;
      .left {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        margin-left: 20px;
        line-height: 30px;
        .title {
          font-size: 18px;
        }
        .userName {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
.van-picker__cancel {
  display: none;
}
.van-picker__confirm {
  width: 100%;
}
</style>